<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true" :bgColorStyle="theme">
			<block slot="backText">{{$t("返回")}}</block>
			<block slot="content">查询条件</block>
		</cu-custom>
		<form @submit="search" style='display:block;'>
			<view id='main' v-show='TabCur == 0'>
				<js-input labelName='单行文本' path='testInput' :value='main.testInput' :maxlength="200"></js-input>
				<js-textarea labelName='多行文本' path='testTextarea' :value='main.testTextarea' :maxlength="200"></js-textarea>
				<js-select :blankOption="true" labelName='下拉框' dictType="sys_menu_type" path='testSelect' :value='main.testSelect'></js-select>
				<js-input :currentTime="false" labelName='日期选择 从' mode='date' path='testDate_gte' :value='main.testDate_gte'></js-input>
				<js-input :currentTime="false" labelName='到' mode='date' path='testDate_lte' :value='main.testDate_lte'></js-input>
				<js-input :currentTime="false" labelName='日期时间 从' mode='datetime' path='testDatetime_gte' :value='main.testDatetime_gte'></js-input>
				<js-input :currentTime="false" labelName='到' mode='datetime' path='testDatetime_lte' :value='main.testDatetime_lte'></js-input>
				<js-tree-select :value='getDeep("testUser.userCode")' :labelValue='getDeep("testUser.userName")' url='a/sys/office/treeData?isLoadUser=true' labelName="用户选择 : " path="testUser.userCode" labelPath="testUser.userName"></js-tree-select>
				<js-tree-select :value='getDeep("testOffice.officeCode")' :labelValue='getDeep("testOffice.officeName")' url='a/sys/office/treeData' labelName="机构选择 : " path="testOffice.officeCode" labelPath="testOffice.officeName"></js-tree-select>
				<js-tree-select :value='main.testAreaCode' :labelValue='main.testAreaName' url='a/sys/area/treeData' labelName="区域选择 : " path="testAreaCode" labelPath="testAreaName"></js-tree-select>
			</view>
			<button class="margin-top text-white" :style="{backgroundColor:theme}" form-type="submit">搜索</button>
			<button class="margin-top text-white bg-red" @tap.stop="clear">清空</button>
		</form>
	</view>
</template>
<script>

	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				TabCur: 0,
				main: {}
			}
		},
		computed: {
			...mapState(["theme"])
		},
		mounted() {
			/* this.get('1358632213327491072'); */
			this.main = {
				testUser:{},
				testOffice:{}
			}
			let _this = this
			uni.getStorage({
			    key: 'list_test_search',
			    success:(res)=> {
			       _this.main = res.data
			    }
			});
		},
		methods: {
			search(e) {
				let formData = e.detail.value
				// 特殊处理
				if(formData["testUser.userCode"]){
					formData["testUser_userCode"] = formData["testUser.userCode"]
				}
				if(formData["testOffice.officeCode"]){
					formData["testOffice_officeCode"] = formData["testOffice.officeCode"]
				}
				uni.setStorage({
				    key: 'list_test_search',
				    data: formData,
				    success: function () {
				       uni.navigateBack({
				       	delta: 1
				       });
				    }
				});
			},
			getDeep(val){
				if(this.main){
					return this.main[val]
				} else {
					return ''
				}
				
			},
			clear(){
				uni.removeStorage({
				    key: 'list_test_search',
				    success: (res)=> {
						uni.navigateBack({
							delta: 1
						});
				    }
				});
			}
		}
	}
</script>
<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>